<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溢出省略号</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: yellow;
            /* nowrap:超过不换行，有滚动条出现  pre:类似于pre标签效果  pre-wrap:弯则并且有换行效果  pre-line:换行符号保留，不保留空格*/
            white-space: nowrap;
            overflow: hidden;
            /* ellipsis:省略号  clip:裁切(默认值)*/
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet, numquam laborum ab, adipisci, hic mollitia illum accusantium impedit esse atque quod cupiditate velit alias! Quae tenetur quas harum dolore iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur voluptates enim minus vero, qui inventore. Adipisci quas quaerat laborum dolorem asperiores pariatur voluptatum placeat possimus, deserunt aliquam, praesentium explicabo minus.</div>
    <!-- pre标签会保留样式 -->
    <pre>
        div{
            width: 200px;
            height: 200px;
            background: yellow;
            /* nowrap:超过不换行，有滚动条出现  */
            white-space: nowrap;
        }
    </pre>
</body>
</html>